<template>
  <div class="tabs-wrapper">
    <el-scrollbar class="scroll-container">
      <router-link
        class="tabs-item"
        :class="isActive({ path: '/layout'})"
        to="/layout"
        tag="span"
      >
        首页
      </router-link>
      <router-link
        class="tabs-item"
        v-for="item of tabs"
        :class="isActive(item)"
        :to="{ path: item.path, query: item.query, fullPath: item.fullPath }"
        :key="item.path"
        tag="span"
        @click.middle.native="delRoute(item)"
        @contextmenu.prevent.native="openMenus(item, $event)"
      >
        {{ item.meta.title }}
        <i @click.prevent.stop="delRoute(item)" class="el-icon-close"></i>
      </router-link>
    </el-scrollbar>
    <div class="contextmenu" :style="{ left: contextMenu.left + 'px', top: contextMenu.top + 'px' }" v-show="contextmenuShow">
      <ul>
        <li @click.prevent.stop="delRoute(currentRoute)">删除</li>
        <li>删除全部</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabs: [],
      contextmenuShow: false,
      contextMenu: {
        left: 0,
        top: 0
      },
      currentRoute: null
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        if (this.tabs.some(v => v.path === val.path) || val.path === '/layout') return
        this.tabs.push(val)
      }
    },
    contextmenuShow(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenus)
      } else {
        document.body.removeEventListener('click', this.closeMenus)
      }
    }
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path ? 'active' : ''
    },
    delRoute(route) {
      if (route.path !== '/layout') {
        const delIndex = this.tabs.findIndex(item => item.path === route.path)
        this.tabs.splice(delIndex, 1)
        if (this.$route.path === route.path) {
          this.$router.replace('/layout')
        }
        this.closeMenus()
      }
    },
    openMenus(currentRoute, e) {
      // 当前选择路由
      this.currentRoute = currentRoute

      // 弹出位置
      const offsetWidth = this.$el.offsetWidth
      const maxLeft = offsetWidth - 200 // left boundary
      const left = e.clientX + 15

      if (left > maxLeft) {
        this.contextMenu.left = maxLeft
      } else {
        this.contextMenu.left = left
      }

      this.contextMenu.top = e.clientY + 10
      this.contextmenuShow = true
    },
    closeMenus() {
      this.contextmenuShow = false
    }
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.closeMenus)
  }
}
</script>

<style lang="stylus" scoped>
  .tabs-wrapper
    overflow hidden
    height 34px
    width 100%
    background #fff
    border-bottom 1px solid #d8dce5
    box-shadow 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04)
    .scroll-container
      white-space nowrap
      position relative
      overflow hidden
      width 100%
      border-bottom 1px solid #eeeeee
      >>> .el-scrollbar__bar
        bottom 0px
      >>> .el-scrollbar__wrap
          margin-bottom 0!important
          height 40px
      .tabs-item
        box-sizing: border-box;
        display inline-block
        background #ffffff
        color #495060
        padding 0 8px
        border 1px solid #eeeeee
        margin-left 5px
        height 26px
        line-height 26px
        font-size 12px
        cursor pointer
        &.active
          background-color #70a9f1
          color #fff
        i
          margin-left 4px
          &:hover
            color #ffffff
            background #495060
            border-radius 50%
    .contextmenu
      margin 0
      overflow hidden
      background #fff
      z-index 3000
      position fixed
      list-style-type none
      border-radius 5px
      box-shadow 2px 2px 3px 0 rgba(0, 0, 0, .3)
      ul
        padding 5px 0
        margin 0
        li
          padding 5px 10px
          cursor pointer
          font-size 12px
          text-align center
          font-weight 400
          color #333
          &:hover
            background #eee
</style>
